import { useEffect, useState, useCallback } from "react";
import { Input } from "@arco-design/web-react";
import { IconSearch } from "@arco-design/web-react/icon";
import styles from "./index.module.less";
import ChatApi from "@/api/chat/chat-api.ts";
import { useNavigate } from "react-router-dom";
import { SessionRecord } from "@/api/chat/session-record";
const chatRecordList = () => {
  const navigate = useNavigate();
  const [item, setItems] = useState<SessionRecord[]>([]);

  //   跳转会话

  const handlerClickChatDetial = useCallback((data: SessionRecord) => {
    navigate(`/chat/${data.requestId}`);
  }, []);
  useEffect(() => {
    let params = {
      size: 9999,
      current: 1,
    };
    ChatApi.getSessionRecord(params).then((res) => {
      if (res.isSuccess()) {
        setItems(res.result);
      }
    });
  }, []);

  return (
    <>
      {item?.map((item) => {
        return (
          <div
            key={item.requestId}
            className="chat-item"
            onClick={() => handlerClickChatDetial(item)}
          >
            <div className="item-title">{item.sessionName}</div>
            <div className="item-content">{item.sessionName}</div>

            <div className="item-divider"></div>
            <div className="item-time">
              <span className="time">{item.createTime.toLocaleString()}</span>
            </div>
          </div>
        );
      })}
    </>
  );
};

const ChatHistory = () => {
  return (
    <div className={styles.chatHistoryWarp}>
      <div className="header">
        <div className="header-title">历史记录</div>

        <div className="searchBox">
          <Input
            className=""
            allowClear
            style={{ width: 350, background: "#fff" }}
            suffix={<IconSearch />}
            placeholder="请输入会话名称"
          />
        </div>
      </div>

      <div className="content">
        <div className="chat-content">{chatRecordList()}</div>
      </div>
    </div>
  );
};

export default ChatHistory;
